<!--
 * @description 徽标组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-badge"
		:class="_classes"
		:style="_styles"
		:hover-class="$attrs.hoverClass || $attrs['hover-class']"
	>
		<slot>
			<text class="pure-badge__text">{{ _text }}</text>
		</slot>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 主题
	if (_props.theme) {
		array.push("pure-badge--theme");

		// 不是以 "--" 开头的，则默认认为是 pure 内置主题
		if (!_props.theme.startsWith("--")) {
			array.push(`pure-badge--theme--${_props.theme}`);
		}

		// 否则则直接使用用户自定义的 css 变量
		else array.push(`pure-badge--theme${_props.theme}`);
	}

	// 幽灵
	if (_props.ghost) array.push("pure-badge--ghost");

	// 镂空
	if (_props.plain) array.push("pure-badge--plain");

	// 圆点模式
	if (_props.mode === "dot") array.push("pure-badge--dot");

	// absolute 定位
	if (_props.absolute) array.push("pure-badge--absolute");

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];

	// 主题
	if (_props.theme) {
		// 不是以 "--" 开头的，则默认认为是 pure 内置主题
		if (!_props.theme.startsWith("--")) {
			array.push(
				`--pure-badge-theme-value: var(--pure-theme-${_props.theme})`
			);
		}

		// 否则则直接使用用户自定义的 css 变量
		else array.push(`--pure-badge-theme-value: var(${_props.theme})`);
	}

	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 格式化后的值
const _text = computed(() => {
	// 未设置显示模式
	if (!_props.mode) return _props.value;

	// 圆点模式
	if (_props.mode === "dot") return "";

	// 溢出模式
	if (_props.mode === "overflow") {
		const valueNumber = Number(_props.value);
		const maxNumber = _props.max;

		// 未超出
		if (valueNumber <= maxNumber) {
			return valueNumber;
		}

		// 超出了
		return maxNumber + _props.suffix;
	}

	// 切割模式
	if (_props.mode === "limit") {
		const valueNumber = Number(_props.value);
		const limitValueNumber = _props.max;
		const decimalLengthNumber = _props.decimal;

		// 未超出
		if (valueNumber <= limitValueNumber) {
			return valueNumber;
		}

		// 超出了
		const floatValue = (valueNumber / limitValueNumber).toFixed(
			decimalLengthNumber
		);
		return floatValue + _props.suffix;
	}
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
